<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-08-07 15:26:27
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-08-08 12:41:57
 * @FilePath: \web-components-box\components\Player\index.vue
 * @Description: 视频播放器
-->
<script setup lang="ts">
import type { IPlayerOptions } from 'xgplayer'
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import DemoBasePlugin from './demoBasePlugin.js'
import DemoPlugin from './demoPlugin.tsx'

const props = defineProps({
  config: {
    type: Object as () => IPlayerOptions,
    default: () => ({
      id: 'mse',
      url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4',
      height: '100%',
      width: '100%',
    }),
  },
})

const emit = defineEmits(['player'])

let player: Player | null = null

const init = () => {
  if (props.config.url) {
    player = new Player({
      ...props.config,
      plugins: [DemoBasePlugin],  // 配置参数注册插件
    })
    // 调用接口注册插件
    player.registerPlugin(DemoPlugin)
    emit('player', player)
  }
}

watch(
  () => props.config,
  () => {
    init()
  },
  { 
    deep: true
  }
)

onMounted(() => {
  init()
})

onBeforeUnmount(() => {
  player && typeof player.destroy === 'function' && player.destroy()
})
</script>

<template>
  <div :id="props.config.id" />
</template>
